<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#txt {
				width: 660px;
				height: 19px;
			}
			input {
				margin-top: 30px;
			}
			ul li {
				list-style: none;
				color: #666;
			}
		</style>
	</head>
	<body>
			<input type="text" id="txt"  />
			<input type="button" id="btn" value="搜索"  />
			<ul id="ul">
			
			</ul>
	</body>
	<script>
		
		var oTxt = document.getElementById("txt");
		var oBtn = document.getElementById("btn");

		oTxt.onkeyup = function(){
			var sc = document.createElement("script");
			//将其src属性设置为淘宝首页接口
			sc.src = "https://suggest.taobao.com/sug?&q="+ oTxt.value +"&callback=fn";
			document.getElementsByTagName("head")[0].appendChild(sc);
		};
	
		function fn(str){
			//console.log(str.result);
			
			for(var i = 0; i < str.result.length; i ++){
				str.result[i].index = i;
				var li = document.createElement("li");
				li.innerHTML = str.result[i];
				document.getElementById("ul").appendChild(li);
				
				li.onmouseover = function(){
					this.style.background = "#f0f0f0";
					this.style.color = "#333"
				};
				li.onmouseout = function(){
					this.style.background = "";
					this.style.color = "#666"
				};
			}
		}
		
	</script>
</html>
